<template>
  <div class="views">
    <el-config-provider :locale="zhCn" size="default" :z-index="3000">
      <el-container>
        <el-aside>
          <Menu />
        </el-aside>
        <el-container>
          <el-header v-if="!isLowCodeRoute">
            <!-- <img
              class="logo-img"
              src="https://webresource.c-ctrip.com/ares2/nfes/pc-home/1.0.65/default/image/logo.png"
              alt=""
            /> -->
            <el-input
              size="large"
              v-model="searchValue"
              placeholder="搜索任何旅游相关"
              class="input-with-select"
            >
              <template #append>
                <el-button :icon="Search" type="primary"></el-button>
                <!-- icon 自动按需引入写法 -->
                <!-- <el-icon><IEpSearch /></el-icon> -->
              </template>
            </el-input>
            <div class="other">
              <span class="singUp"
                ><el-button size="large" round :icon="UserFilled" type="primary"
                  >请登录</el-button
                ></span
              >
              <span class="singIn">注册</span>
              <span class="chat"
                ><el-icon><Service /></el-icon
              ></span>
            </div>
          </el-header>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-config-provider>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useRoute } from "vue-router";
// import Menu from "./components/Menu.vue";
import { Search, UserFilled, Service } from "@element-plus/icons-vue";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";

const searchValue = ref();
const route = useRoute();

// 检查是否为lowCode路由
const isLowCodeRoute = computed(() => {
  return ['lowCode', 'questionPage', 'questionPreview'].includes(route.name as string);
});
</script>

<style scoped lang="scss">
.views {
  width: 100%;
  height: 100%;
  .el-container {
    width: 100%;
    height: 100%;
    .el-aside {
      width: auto;
    }
    .el-header {
      min-width: 1080px;
      margin: auto;
      display: flex;
      align-items: center;
      padding: 0;
      .logo-img {
        width: 194px;
        height: 32px;
      }
      ::v-deep(.el-input) {
        margin-left: 40px;
        width: 500px;
        border: 1px solid #0086f6;
        border-radius: 5px;
        .el-input__wrapper {
          box-shadow: none;
        }
        .el-input-group__append {
          width: 80px;
          background-color: #0086f6;
          color: #fff;
          font-size: 20px;
          font-weight: bold;
          box-shadow: none;
        }
        .el-icon {
          height: 15px;
        }
      }
      .other {
        flex: 1;
        text-align: right;
        & > span {
          margin-left: 20px;
        }
        .singUp {
          ::v-deep(.el-button) {
            .el-icon {
              font-size: 20px;
            }
          }
        }
        .singIn {
          cursor: pointer;
        }
        .chat {
          display: inline-block;
          width: 24px;
          height: 24px;
          vertical-align: middle;
          cursor: pointer;
          .el-icon {
            font-size: 24px;
          }
        }
      }
    }
    .el-main {
      min-width: 1080px;
      // margin: auto;
      padding: 0;
    }
  }
}
</style>
